<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
</head>
<body>
    <button id="public">发表动态</button>
    <script>
        //观察者  粉丝
        class Fan{
            constructor(name){
                this.name = name 
            }
            //接受动态
            update(){
                console.log(`${this.name}接受到变化`)
            }
        }
        class Star{
            constructor(){
                this.fans = [];
            }
            //添加粉丝
            add(fan){
                this.fans.push(fan)
            }
            //通知粉丝
            public(){
                this.fans.forEach(fan=>{
                    fan.update();
                })
            }
        }
        let star = new Star();//明星

        let f1 = new Fan('1')//粉丝
        let f2 = new Fan('2')
        let f3 = new Fan('3')
        let f4 = new Fan('4')

        star.add(f1)
        star.add(f2)
        star.add(f3)
        star.add(f4)

        let public = document.querySelector('#public');
        //按钮点击发表 内容同时通知粉丝
        public.addEventListener('click',()=>{
            star.public();
        })
    </script>
</body>
</html>